<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="toggleItem($event)" [disabled]="disabled">
  <div class="selected-icon me-1">
    <ng-container *ngIf="isChecked()">
      <svg fill="currentColor" class="buttonicon-sm bi-check">
        <use xlink:href="assets/bootstrap-icons.svg#check"/>
      </svg>
    </ng-container>
    <ng-container *ngIf="isPartiallyChecked()">
      <svg fill="currentColor" class="buttonicon-sm bi-dash">
        <use xlink:href="assets/bootstrap-icons.svg#dash"/>
      </svg>
    </ng-container>
    <ng-container *ngIf="isExcluded()">
      <svg fill="currentColor" class="buttonicon-sm bi-x">
        <use xlink:href="assets/bootstrap-icons.svg#x"/>
      </svg>
    </ng-container>
  </div>
  <div class="me-1">
    <pngx-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="false"></pngx-tag>
    <ng-template #displayName><small>{{item.name}}</small></ng-template>
  </div>
  <div *ngIf="!hideCount" class="badge bg-light text-dark rounded-pill ms-auto me-1">{{count ?? item.document_count}}</div>
</button>
